"use client"

import { ChevronRight, Menu, Grid3X3, Calendar, BookOpen, TrendingUp, Bookmark, Book } from "lucide-react"

export default function MobileLearningApp() {
return (
<div className="w-full max-w-md mx-auto bg-gray-50 min-h-screen font-sans flex flex-col">
{/* Header */}
<div className="flex justify-between items-center p-4 bg-white">
  <div className="flex-1"></div>
  <div className="flex gap-4">
    <Menu className="w-6 h-6 text-gray-700" />
    <Grid3X3 className="w-6 h-6 text-gray-700" />
  </div>
</div>

{/* Profile Card */}
<div className="flex items-center p-4 bg-white mt-2">
  <div className="w-16 h-16 rounded-full bg-white border border-gray-200 flex items-center justify-center text-2xl font-light">
    梦
  </div>
  <div className="flex-1 ml-4">
    <div className="flex items-center gap-4">
      <span className="text-gray-600 text-sm">BczID: 1380229681</span>
      <span className="border border-gray-300 rounded-full px-2 py-1 text-xs text-gray-600">大三 ›</span>
    </div>
  </div>
  <ChevronRight className="w-5 h-5 text-gray-400" />
</div>

{/* Learning Stats */}
<div className="flex items-center p-4 bg-white mt-2">
  <span className="text-lg mr-2">📊</span>
  <span className="text-base text-gray-800">
          累计已学 <strong>0</strong>，坚持 <strong>0</strong> 天
        </span>
</div>

{/* Coins Card */}
<div className="flex justify-between items-center p-4 bg-white mt-2">
  <div className="flex items-center">
    <div className="w-8 h-8 bg-orange-500 rounded-full mr-2 relative">
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full"></div>
    </div>
    <span className="text-base text-gray-800">
            <strong>5</strong> 个铜板
          </span>
  </div>
  <span className="text-gray-500 text-sm">去兑换 ›</span>
</div>

{/* Learning Devices */}
<div className="p-4 bg-white mt-2">
  <div className="flex items-center mb-4">
    <div className="bg-blue-50 p-1 rounded mr-2">
      <span>💻</span>
    </div>
    <span className="text-base font-medium text-gray-800">我的学习设备</span>
  </div>
  <div className="grid grid-cols-4 gap-3">
    <div className="flex flex-col items-center text-center">
      <div className="w-16 h-16 bg-gray-200 rounded-lg mb-2 relative flex items-center justify-center">
        <div className="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1 rounded font-bold">NEW</div>
        <div className="w-10 h-10 bg-white rounded relative">
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-blue-500 rounded-full"></div>
        </div>
      </div>
      <span className="text-xs text-gray-600">单词机Lite</span>
    </div>
    <div className="flex flex-col items-center text-center">
      <div className="w-16 h-16 bg-gray-200 rounded-lg mb-2 flex items-center justify-center">
        <div className="w-10 h-10 bg-white rounded relative">
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-yellow-500 rounded-full"></div>
        </div>
      </div>
      <span className="text-xs text-gray-600">单词机Max</span>
    </div>
    <div className="flex flex-col items-center text-center">
      <div className="w-16 h-16 bg-gray-200 rounded-lg mb-2 flex items-center justify-center">
        <div className="w-4 h-12 bg-gray-800 rounded"></div>
      </div>
      <span className="text-xs text-gray-600">词典笔Lite</span>
    </div>
    <div className="flex flex-col items-center text-center">
      <div className="w-16 h-16 bg-gray-200 rounded-lg mb-2 flex items-center justify-center">
        <div className="w-12 h-8 bg-white rounded relative">
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-blue-500 rounded-full"></div>
        </div>
      </div>
      <span className="text-xs text-gray-600">扫学机</span>
    </div>
  </div>
</div>

{/* Menu List */}
<div className="bg-white mt-2">
  {[
  { icon: <Calendar className="w-4 h-4" />, text: `我的日历` },
  { icon: <BookOpen className="w-4 h-4" />, text: `我的学习` },
  { icon: <TrendingUp className="w-4 h-4" />, text: `我的词汇量` },
  { icon: <Bookmark className="w-4 h-4" />, text: `我的收藏` },
  { icon: <Book className="w-4 h-4" />, text: `我的图书` },
  ].map((item, index) => (
  <div key={index} className="flex justify-between items-center p-4 border-b border-gray-100 last:border-b-0">
    <div className="flex items-center">
      <div className="bg-blue-50 p-2 rounded mr-3">{item.icon}</div>
      <span className="text-base text-gray-800">{item.text}</span>
    </div>
    <ChevronRight className="w-5 h-5 text-gray-400" />
  </div>
  ))}
</div>

{/* Bottom Navigation */}
<div className="flex justify-around bg-white border-t border-gray-200 py-2 mt-auto">
  {[
  { icon: `📝`, text: `单词`, active: false },
  { icon: `📖`, text: `学习`, active: false },
  { icon: `背`, text: `一起背`, active: false, isCircle: true },
  { icon: `铜`, text: `铜板购`, active: false, isCircle: true },
  { icon: `👤`, text: `我`, active: true },
  ].map((item, index) => (
  <div
      key={index}
      className={`flex flex-col items-center p-2 ${item.active ? `text-blue-600` : `text-gray-500`}`}
  >
    <div className="text-xl mb-1">
      {item.isCircle ? (
      <div
          className={`w-6 h-6 border rounded-full flex items-center justify-center text-xs font-bold ${
          item.active ? `border-blue-600 text-blue-600` : `border-gray-500 text-gray-500`
          }`}
      >
        {item.icon}
      </div>
      ) : (
      item.icon
      )}
    </div>
    <span className="text-xs">{item.text}</span>
  </div>
  ))}
</div>
</div>
)
}
